logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.4
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0
When To Use
Examples
Simple list
Basic list
Load more
Vertical
Pagination Settings
Grid
Responsive grid list
Scrolling loaded
virtual list
API
List
pagination
List grid props
List.Item
List.Item.Meta
Semantic DOM
Design Token

List

Basic list display, which can carry text, lists, pictures, paragraphs.
Importimport { List } from "antd";
Sourcecomponents/list
Docs
Edit this pageChangelog
contributors
  • ImagePopover

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuque logoAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconf logoSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTech logoMore Products

    yuque logoYuQue-Document Collaboration Platform
    AntV logoAntV-Data Visualization
    Egg logoEgg-Enterprise Node.js Framework
    Kitchen logoKitchen-Sketch Toolkit
    Galacean logoGalacean-Interactive Graphics Solution
    xtech logoAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community
    loading

    When To Use

    A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.

    Examples

    API

    Common props ref:Common props

    List

    PropertyDescriptionTypeDefaultVersion
    borderedToggles rendering of the border around the listbooleanfalse
    dataSourceDataSource array for listany[]-
    footerList footer rendererReactNode-
    gridThe grid type of list. You can set grid to something like {gutter: 16, column: 4}object-
    headerList header rendererReactNode-
    itemLayoutThe layout of listhorizontal | verticalhorizontal
    loadingShows a loading indicator while the contents of the list are being fetchedboolean | SpinProps (more)false
    loadMoreShows a load more contentReactNode-
    localeThe i18n text including empty textobject{emptyText: No Data}
    paginationPagination config, hide it by setting it to falseboolean | objectfalse
    renderItemCustomize list item when using dataSource(item: T, index: number) => ReactNode-
    rowKeyItem's unique value, could be an Item's key which holds a unique value of type React.Key or function that receives Item and returns a React.Keykeyof T | (item: T) => React.Key"key"
    sizeSize of listdefault | large | smalldefault
    splitToggles rendering of the split under the list itembooleantrue

    pagination

    Properties for pagination.

    PropertyDescriptionTypeDefault
    positionThe specify the position of Paginationtop | bottom | bothbottom
    alignThe specify the alignment of Paginationstart | center | endend

    More about pagination, please check Pagination.

    List grid props

    PropertyDescriptionTypeDefaultVersion
    columnThe column of gridnumber-
    gutterThe spacing between gridnumber0
    xs<576px column of gridnumber-
    sm≥576px column of gridnumber-
    md≥768px column of gridnumber-
    lg≥992px column of gridnumber-
    xl≥1200px column of gridnumber-
    xxl≥1600px column of gridnumber-

    List.Item

    PropertyDescriptionTypeDefaultVersion
    actionsThe actions content of list item. If itemLayout is vertical, shows the content on bottom, otherwise shows content on the far rightArray<ReactNode>-
    classNamesSemantic structure classNameRecord<actions | extra, string>-5.18.0
    extraThe extra content of list item. If itemLayout is vertical, shows the content on right, otherwise shows content on the far rightReactNode-
    stylesSemantic DOM styleRecord<actions | extra, CSSProperties>-5.18.0

    List.Item.Meta

    PropertyDescriptionTypeDefaultVersion
    avatarThe avatar of list itemReactNode-
    descriptionThe description of list itemReactNode-
    titleThe title of list itemReactNode-

    Semantic DOM

    Design Token

    Component TokenHow to use?
    Token NameDescriptionTypeDefault Value
    avatarMarginRightRight margin of avatarundefined | MarginRight<string | number>16
    contentWidthWidth of contentstring | number220
    descriptionFontSizeFont size of descriptionnumber14
    emptyTextPaddingPadding of empty textundefined | Padding<string | number>16
    footerBgBackground color of footerstringtransparent
    headerBgBackground color of headerstringtransparent
    itemPaddingPadding of itemstring12px 0
    itemPaddingLGPadding of large itemstring16px 24px
    itemPaddingSMPadding of small itemstring8px 16px
    metaMarginBottomMargin bottom of metaundefined | MarginBottom<string | number>16
    titleMarginBottomMargin bottom of titleundefined | MarginBottom<string | number>12
    Global TokenHow to use?
    Simple list

    Ant Design supports a default list size as well as a large and small size.

    If a large or small list is desired, set the size property to either large or small respectively. Omit the size property for a list with the default size.

    Customizing the header and footer of list by setting header and footer property.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Basic list

    Basic list.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Load more

    Load more list with loadMore property.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Vertical

    Set the itemLayout property to vertical to create a vertical list.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Pagination Settings

    List pagination can be used and set through the pagination property.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Grid

    Create a grid layout by setting the grid property of List.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Responsive grid list

    Responsive grid list. The size property the is as same as Layout Grid.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Scrolling loaded

    The example of infinite load with react-infinite-scroll-component.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    virtual list

    An example of infinite & virtualized list via using rc-virtual-list.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Default Size
    Header
    • [ITEM] Racing car sprays burning fuel into crowd.
    • [ITEM] Japanese princess to wed commoner.
    • [ITEM] Australian walks 100km after outback crash.
    • [ITEM] Man charged over missing wedding girl.
    • [ITEM] Los Angeles battles huge wildfires.
    Footer
    Small Size
    Header
    • Racing car sprays burning fuel into crowd.
    • Japanese princess to wed commoner.
    • Australian walks 100km after outback crash.
    • Man charged over missing wedding girl.
    • Los Angeles battles huge wildfires.
    Footer
    Large Size
    Header
    • Racing car sprays burning fuel into crowd.
    • Japanese princess to wed commoner.
    • Australian walks 100km after outback crash.
    • Man charged over missing wedding girl.
    • Los Angeles battles huge wildfires.
    Footer
    • Ant Design Title 1

      Ant Design, a design language for background applications, is refined by Ant UED Team
    • Ant Design Title 2

      Ant Design, a design language for background applications, is refined by Ant UED Team
    • Ant Design Title 3

      Ant Design, a design language for background applications, is refined by Ant UED Team
    • Ant Design Title 4

      Ant Design, a design language for background applications, is refined by Ant UED Team
    • ant design part 0

      Ant Design, a design language for background applications, is refined by Ant UED Team.
      We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
      • 156
      • 156
      • 2
      logo
    • ant design part 1

      Ant Design, a design language for background applications, is refined by Ant UED Team.
      We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
      • 156
      • 156
      • 2
      logo
    • ant design part 2

      Ant Design, a design language for background applications, is refined by Ant UED Team.
      We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
      • 156
      • 156
      • 2
      logo
    ant design footer part
    • 1
    • 2
    • 3
    • 4
    • 5
    • •••
    • 8
    Pagination Position:
    Pagination Align:
    • Ant Design Title 1

      Ant Design, a design language for background applications, is refined by Ant UED Team
    • Ant Design Title 2

      Ant Design, a design language for background applications, is refined by Ant UED Team
    • Ant Design Title 3

      Ant Design, a design language for background applications, is refined by Ant UED Team
    • Ant Design Title 4

      Ant Design, a design language for background applications, is refined by Ant UED Team
    • 1
    Title 1
    Card content
    Title 2
    Card content
    Title 3
    Card content
    Title 4
    Card content
    Title 1
    Card content
    Title 2
    Card content
    Title 3
    Card content
    Title 4
    Card content
    Title 5
    Card content
    Title 6
    Card content
    No data
    No data

    • ant design part 0

      Ant Design, a design language for background applications, is refined by Ant UED Team.
      We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
      • 156
      • 156
      • 2
      logo
    • extra
      5.18.0
      set `extra` of List.Item
    • actions
      5.18.0
      set `actions` of List.Item